<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-2利用计算属性计算总分和平均分</title>
    <script src="https://unpkg.com/vue@3"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>学科</th>
                    <th>分数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>语文</td>
                    <td><input type="text" v-model="chinese" /></td>
                </tr>
                <tr>
                    <td>数学</td>
                    <td><input type="text" v-model="math" /></td>
                </tr>
                <tr>
                    <td>英语</td>
                    <td><input type="text" v-model="english" /></td>
                </tr>
                <tr>
                    <td>总分</td>
                    <td><input type="text" v-bind:value="totalscore"/></td>
                </tr>
                <tr>
                    <td>平均分</td>
                    <td><input type="text" v-bind:value="avgscore"/></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    chinese: 90,
                    math: 80,
                    english: 90,
                };
            },
            computed: {
                totalscore() {
                    return this.chinese+this.math+this.english;
                },
                avgscore() {
                    return Math.ceil((this.chinese+this.math+this.english)/3);
                },
            },
        }).mount("#app");
    </script>
</body>

</html>